<template>
  <el-tabs style="margin-top:20px;" v-model="activeIndex" @tab-click="handleClick">
    <el-tab-pane label="法律状态">
      <el-table :header-cell-style="{ background: '#F3F8FE' }" :data="data.law_infos" border class="tabbleWidth">
        <el-table-column width="130" prop="time" label="日期">
        </el-table-column>
        <el-table-column width="180" prop="status" label="法律状态">
        </el-table-column>
        <el-table-column width="180" prop="info" label="法律状态信息">
        </el-table-column>
        <el-table-column prop="desc" label="附加信息">
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="费用信息">
      <el-button v-if="!pay" class="infos mBton" type="primary" @click="open">查看费用信息</el-button>

      <p v-if="data.cost_type == '1' && pay" class="infos">应缴费信息</p>
      <el-table v-if="data.cost_type == '1' && pay" :data="pay.FeeShouldPay" border style="width:38%">

        <el-table-column prop="feeName" label="费用种类" width="180">
        </el-table-column>
        <el-table-column prop="shouldPayPayment" label="应缴金额" width="180">
        </el-table-column>
        <el-table-column prop="shouldPayDate" label="缴费截止日">
        </el-table-column>
      </el-table>
      <p v-if="data.cost_type == '1' && pay" class="infos">已缴费信息</p>
      <el-table v-if="data.cost_type == '1' && pay" :data="pay.FeeOriginal" border class="tabbleWidth">

        <el-table-column prop="feeName" label="费用种类" width="180">
        </el-table-column>
        <el-table-column prop="paymentAmount" label="已缴金额" width="180">
        </el-table-column>
        <el-table-column prop="paymentDate" label="缴费日期">
        </el-table-column>
        <el-table-column prop="payerName" label="缴费人姓名">
        </el-table-column>
        <el-table-column prop="receiptNumber" label="收据号">
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="复审无效">
      <div v-if="review" class="tab_box">
        <div class="tab_item">
          <div class="left_title">主审员</div>
          <div class="content">{{ review.rimec }}</div>
          <div class="left_title">决定号</div>
          <div class="content">{{ review.ridn }}</div>
        </div>
        <div class="tab_item">

          <div class="left_title">参审员</div>
          <div class="content">{{ review.riaec }}</div>
          <div class="left_title">合议组组长</div>
          <div class="content">{{ review.rilec }}</div>
        </div>
        <div class="tab_item">
          <div class="left_title">决定日</div>
          <div class="content">{{ review.ridd }}</div>
          <div class="left_title">请求人</div>
          <div class="content">{{ review.claimer }}</div>

        </div>
        <div class="tab_item">
          <div class="left_title">案由</div>
          <div class="content anyou" v-html="review.html">
          </div>
        </div>
      </div>
      <div class="infos mBton" v-else>暂无数据</div>
    </el-tab-pane>
    <el-tab-pane label="许可信息">
      <el-table v-if="permit" class="tabbleWidth" :header-cell-style="{ background: '#F3F8FE' }" :data="permit" border>
        <el-table-column prop="apc" label="许可人">
        </el-table-column>
        <el-table-column prop="trpc" label="被许可人">
        </el-table-column>
      </el-table>
      <div class="infos mBton" v-else>暂无数据</div>
    </el-tab-pane>
    <el-tab-pane label="专利质押">
      <el-table v-if="patent" :header-cell-style="{ background: '#F3F8FE' }" :data="patent" border class="tabbleWidth">
        <el-table-column width="200" prop="time" label="登记生效日">
        </el-table-column>
        <el-table-column width="280" prop="time" label="登记号">
        </el-table-column>
        <el-table-column prop="ppoc" label="质押人 ">
        </el-table-column>
        <el-table-column prop="pppc" label="质权人 ">
        </el-table-column>
        <el-table-column width="280" prop="status" label="备案阶段">
        </el-table-column>
      </el-table>
      <div v-else class="infos mBton">暂无数据</div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { detail } from "@/api"

export default {
  components: {
  },
  data() {
    return {
      data: {},
      activeIndex: 0,
      patent: [],
      permit: [],
      review: [],
      pay: null,
    };
  },
  props: {
    desc: {
      type: Object,
      default: () => {
        return {
        };
      },
    },
    pid: {
      type: String,
      default: ''
    }
  },
  watch: {
    desc: {
      handler(newVal, oldVal) {
        this.data = newVal;
      },
      deep: true,
    },
  },
  created() {

  },
  computed: {},
  async activated() {
    let initTabIndex = '0';
    switch (this.tabName) {
      case "law":
        initTabIndex = '0';
        break;
      case "cost":
        initTabIndex = '1';
        break;
      case "review":
        initTabIndex = '2';
        break;
      case "permit":
        initTabIndex = '3';
        break;
      case "patent":
        initTabIndex = '4';
        break;
      default:
        break;
    }
    this.activeIndex = initTabIndex;

    try {
      this.url = sessionStorage.getItem("url")
      this.name = sessionStorage.getItem("name")

      let pc
      if (this.$store.getters.token) {
        pc = 0
      } else {
        pc = 1
      }
      this.data = await detail({ pid: this.pid, type: 7 })
      this.path = sessionStorage.getItem("path")
      this.pay = this.data.law

      if (this.activeIndex == 4) {
        const res = await detail({
          type: 9,
          pid: this.pid
        })
        this.patent = res.list
      } else if (this.activeIndex == 3) {
        const permit = await detail({
          type: 10,
          pid: this.pid
        })
        this.permit = permit.list
      } else if (this.activeIndex == 2) {
        this.review = await detail({
          type: 11,
          pid: this.pid
        })
      }
    } catch (e) {
      this.$message.error(e.message)
    }
  },
  async mounted() {

  },
  methods: {
    async open() {
      try {
        this.pay = await detail({ pid: this.pid, type: 8 })
        this.$alert(this.pay.msg, {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '我已知道',
          center: true,
          lockScroll: true
        }).then(() => {
          // this.isShow = true
        })
      } catch (e) {
        // this.$message.error(e.message)
      }
    },
    async handleClick(tab) {
      try {
        if (tab.index == 4) {
          const patent = await detail({
            type: 9,
            pid: this.pid
          })
          this.patent = patent.list
        } else if (tab.index == 3) {
          const permit = await detail({
            type: 10,
            pid: this.pid
          })
          this.permit = permit.list
        } else if (tab.index == 2) {
          this.review = await detail({
            type: 11,
            pid: this.pid
          })

        }

      } catch (e) {
        // this.$message.error(e.message)
      }

      let name = "law";
      switch (tab.index) {
        case '0':
          name = "law";
          break;
        case '1':
          name = "cost";
          break;
        case '2':
          name = "review";
          break;
        case '3':
          name = "permit";
          break;
        case '4':
          name = "patent";
          break;
        default:
          break;
      }
    },
  },
};
</script>


<style lang="less" scoped>
.tab_box {
  text-align: center;
}

.tab_item {
  display: flex;

  .left_title {
    width: 151px;
    // height:60px;
    // line-height:60px;
    padding: 20px 0;
    display: block;
    background: #F7F9FC;
    border: 1px solid #E6E9F0;
    font-size: 14px;
    font-weight: 400;
    color: #1F2E4D;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content {
    width: 425px;
    // height: 60px;
    // line-height:60px;
    background: #FFFFFF;
    border: 1px solid #E6E9F0;
    font-size: 14px;
    font-weight: 400;
    color: #1F2E4D;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .anyou {
    width: 1001px;
    padding: 30px;
    overflow: hidden;

    /deep/ div,
    p {
      width: 100%;
      margin: 10px 0;
    }
  }
}

@media (max-width: 750px) {
  .tab_item {
    display: block;

    .left_title {
      width: 100%;
      // height:60px;
      // line-height:60px;
      padding: 20px 0;
      display: block;
      background: #F7F9FC;
      border: 1px solid #E6E9F0;
      font-size: 14px;
      font-weight: 400;
      color: #1F2E4D;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .content {
      width: 100%;
      // height: 60px;
      // line-height:60px;
      background: #FFFFFF;
      border: 1px solid #E6E9F0;
      font-size: 14px;
      font-weight: 400;
      color: #1F2E4D;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px 0;

    }

    .anyou {
      width: 100%;
      padding: 30px;
      overflow: hidden;

      /deep/ div,
      p {
        width: 100%;
        margin: 10px 0;
      }
    }
  }
}
</style>
